/**
 * @Author: jipeng.Li
 * @Date: 2021-03-03 16:45:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-03-03 16:45:21
 * @Description: 确认拨油模态框内容
 */
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Button } from '@/common';
import {
  fontColorCoffee,
  fontColorSecDeepGray,
  mainBgColorBlack,
  mainBgColorWhite,
  px2dp,
  splitLineColorLightGray
} from '@/styles';
import { iconClose } from '@/images';

const { Submit } = Button;

const ConfirmPumpOilModal = (props) => {
  const { price, tipsCell = [], confirmClick, clearClick, disabled } = props;
  return (
    <View
      activeOpacity={0.99}
      style={styles.modalView}
    >
      <View style={styles.modalContent}>
        <View style={styles.modalContentHead}>
          <TouchableOpacity
            onPress={() => clearClick && clearClick()}
          >
            <Image
              style={styles.cancelImage}
              source={iconClose}
              resizeMode='stretch'
            />
          </TouchableOpacity>
          <Text style={styles.modalContentHeadTitle}>拨油确认</Text>
          <View style={styles.cancelImage} />
        </View>
        <View style={styles.modalData}>
          <View style={{ alignItems: 'center' }}>
            <Text style={styles.modalDataText}>
              申请拨油金额(元)
            </Text>
            <Text style={{ color: '#333232', fontSize: px2dp(72), fontWeight: 'bold', }}>
              {price}
            </Text>
          </View>
          <View style={{ marginTop: px2dp(40), width: '100%' }}>
            {
              tipsCell.length > 0 && tipsCell.map(({ tip, text }) => {
                return (
                  <View style={styles.modalDataViewCellView}>
                    <Text style={styles.modalDataText}>{tip}</Text>
                    <Text
                      style={[styles.modalDataText, { color: mainBgColorBlack }]}
                    >
                      {text}
                    </Text>
                  </View>
                );
              })
            }
          </View>
          <Submit
            disabled={!disabled}
            text='申请拨油'
            boxStyle={{
              width: px2dp(654),
              height: px2dp(96),
              borderRadius: px2dp(12),
              overflow: 'hidden',

            }}
            btnStyle={{
              width: px2dp(654),
              height: px2dp(96),
            }}
            btnTextStyle={{
              fontSize: px2dp(36),
            }}
            onClick={() => {
              confirmClick && confirmClick();
            }}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  modalView: {
    flex: 1,
    backgroundColor: 'rgba(51, 50, 50, 0.4)',
    flexDirection: 'column-reverse'
  },
  modalContent: {
    zIndex: 99,
    height: px2dp(900),
    backgroundColor: mainBgColorWhite,
    borderTopLeftRadius: px2dp(15),
    borderTopRightRadius: px2dp(15)
  },
  modalContentHead: {
    flexDirection: 'row',
    padding: px2dp(30),
    borderBottomWidth: px2dp(1),
    borderBottomColor: splitLineColorLightGray,
    alignItems: 'center'
  },
  cancelImage: {
    width: px2dp(28),
    height: px2dp(28)
  },
  modalContentHeadTitle: {
    flex: 1,
    textAlign: 'center',
    color: mainBgColorBlack,
    fontSize: px2dp(32),
    fontWeight: 'bold'
  },
  modalData: {
    alignItems: 'center',
    padding: px2dp(30),
    flex: 1,
    justifyContent: 'space-around',
  },
  modalDataText: {
    color: fontColorSecDeepGray,
    fontSize: px2dp(28)
  },
  modalDataViewCellView: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    paddingVertical: px2dp(30),
    borderBottomWidth: px2dp(1),
    borderBottomColor: splitLineColorLightGray,
  },
  btn: {
    width: '100%',
    height: px2dp(96),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: fontColorCoffee,
    borderRadius: px2dp(12)
  },
});

export default ConfirmPumpOilModal;
